{layout name="main" /}
<fieldset class="layui-elem-field layui-field-title" >
    <legend>接口列表</legend>
</fieldset>

<section class="layui-larry-box">
    <div class="larry-personal">
        <div class="layui-tab">
            <blockquote class="layui-elem-quote mylog-info-tit">
                <ul class="layui-tab-title" style="border: 0;">
                    <li>
                        <form class="layui-form layui-inline">
                            <div class="layui-inline">
                                <select id="app_path" class="layui-input col-md-12 col-sm-12" name="app_path" lay-search="" lay-filter="app_path">
                                    <option value="">选择应用</option>
                                    {foreach name='app_list' item="app"}
                                    {php}$selected = $app['path']==$app_path ? "selected" : "";{/php}
                                    <option value="{$app['path']}" {$selected}>{$app['name']}</option>
                                    {/foreach}
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select id="module_namespace" class="layui-input col-md-12 col-sm-12" name="module_namespace" lay-search="" lay-filter="module_namespace">
                                    <option value="">选择模块</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select id="class_name" class="layui-input col-md-12 col-sm-12" name="class_name" lay-search="" lay-filter="class_name">
                                    <option value="">选择接口类</option>
                                </select>
                            </div>
                        </form>
                    </li>
                </ul>
            </blockquote>
            <div class="larry-separate"></div>
            <div class="layui-tab-content larry-personal-body clearfix mylog-info-box">
                <!-- 操作日志 -->
                <div class="layui-tab-item layui-field-box layui-show" style="min-height: 500px;">
                    <table class="layui-table" id="data_table" lay-filter="data_table"></table>
                </div>
            </div>
        </div>
    </div>
</section>

{php}$url = u('api','index','index');{/php}

<script type="application/javascript">
    var form, table;
    var cols = [[ //标题栏
        {width: 100, templet: '#operationTpl',fixed:true, title: '操作'},
        {field: 'title', width: 150,  event: 'edit', title: '接口名称'},
        {field: 'name', width: 150,  event: 'edit', title: '方法名'},
        {field: 'path', width: 250, sort: true, title: '接口地址'},
        {field: 'route', width: 200, sort: true, title: '路由'},
        {field: 'file_name', width: 450, sort: true, title: '文件地址'}
    ]];

    layui.use(['jquery', 'form', 'table'],function () {
        window.jQuery = window.$ = layui.jquery;
        window.layer  = layui.layer;
        form  = layui.form;
        table = layui.table;
        form.render();

        form.on('select(app_path)',function (obj) {
            var app_path = obj.value;
            modules(app_path);
            reload();
        });

        form.on('select(module_namespace)',function (obj) {
            var app_path = $("#app_path").val();
            var module_namespace = obj.value;
            var url = "{:url('api/index/classes')}";
            postSomething(url,{
                app_path:app_path,
                module_namespace:module_namespace
            },function (res) {
                var classObj = $("#class_name");
                classObj.empty();
                classObj.append("<option value=\"\">选择接口类</option>");
                var class_list = res.data;
                $.each(class_list,function (index,data) {
                    classObj.append("<option value=\""+data.name+"\">"+data.title+"</option>");
                });
                form.render();
                reload();
            })
        });

        form.on('select(class_name)',function () {
            reload();
        });


        reload();
        modules($("#app_path").val());

        table.on('tool(data_table)',function (obj) {
            var app_namespace = obj.data.app_namespace;
            var class_name = obj.data.class_name;
            var func_name = obj.data.name;
            if(obj.event === 'debug'){
                tabAdd({
                    title:"调试",
                    icon:"fa fa-bug",
                    id:"debug",
                    url:"{:url('api/debug/index')}?an="+app_namespace+"&cn=" + class_name + "&fn=" +func_name
                });
            }
        });
    });

    function reload() {
        var app_path = $("#app_path").val();
        var module_namespace = $("#module_namespace").val();
        var class_name = $("#class_name").val();
        table.init();
        table.render({
            id: 'data_table',
            height: 550,
            elem: '#data_table',
            url: '{$url}',
            where: {class_name: class_name , app_path:app_path , module_namespace:module_namespace},
            method: 'post',
            page: false,
            limits: [10, 30, 50, 100],
            limit: 10,
            loading: false,
            cols: cols
        });
    }

    function modules(app_path) {
        var moduleObj = $("#module_namespace");
        $("#class_name").empty();
        moduleObj.empty();
        var url = "{:url('api/index/modules')}";
        $.post(url,{app_path:app_path},function (res) {
            moduleObj.append("<option value=\"\">选择模块</option>");
            var module = res.data;
            $.each(module,function (index,data) {
                moduleObj.append("<option value=\""+data.namespace+"\">"+data.name+"</option>");
            });

            form.render();
        });
    }
</script>
<script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-default layui-btn-mini" lay-event="debug">调试</a>
</script>